<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-text="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../static/js/vue.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
</head>
<body>

<div id="h1">

    <h1 >{{msg}}</h1>
    <h1>{{data}}</h1>
    <h1 v-text="msg"></h1>
    <h1 v-html="content"></h1>

    <h1><a href="http://www.baidu.com">百度</a></h1>

    <input type="text" name="name" value="1" id="input"><br>

    <button v-on:click="test" >点击</button><br>

    <img width="200" v-bind:src="src"/>

    <button @click="changeImg">跟换图片</button>

</div>






</body>
</html>

<script>

    var vue = new Vue({

                el: '#h1',
                data: {
                    msg: 'hello vue',
                    data: 1,
                    content: "<a href='http://www.baidu.com'>百度</a>",
                    src: "http://www.people.com.cn/NMediaFile/2021/0816/MAIN202108161036498910319665732.jpg"
                },
                methods: {
                    test: function(){
                        this.data = this.data + 1;
                    },

                    changeImg(){
                        this.src = "http://www.people.com.cn/NMediaFile/2021/0816/MAIN202108161036506025839892599.jpg";
                    }

                }

    })

</script>